Node / public / micron-parser-js rns://4cf8a0651c4d73cacd0f93ac1d95e80a/public/micron-parser-js

󰉖 Files • 󱌣 Work (0) • 󰋚 Commits (85) • 󰘬 Branches (1) • 󰓼 Tags (0) • 󰋑 Thanks (0)

Micron Parser JS requires DOMpurify for HTML/XSS sanitization. To install DOMpurify, include it with your script tags above micron-parser.js or install via a package manager like NPM T383838npm install micron-parser

T282828

Tff7b72import Te6edf3MicronParser Tff7b72from Ta5d6ff'./js/micron-parser.js'Tb4b4b4;

T8b949e// Create a new parser (darkTheme = true/false | defaults to true, forceMonospace = true/false | defaults to true)

Tff7b72const Te6edf3parser Tff7b72= Tff7b72new Te6edf3MicronParserTb4b4b4(Tff7b72trueTb4b4b4, Tff7b72trueTb4b4b4)Tb4b4b4;

T8b949e// Input Micron markup

Tff7b72const Te6edf3micronMarkup Tff7b72= Ta5d6ff`

Ta5d6ff> Example Heading

This is a simple line in Micron.

Ta5d6ff`Tb4b4b4;

T8b949e// Convert Micron to an HTML string

Tff7b72const Te6edf3htmlOutput Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

T8b949e// Insert it into your page

Tffa657documentTb4b4b4.Te6edf3getElementByIdTb4b4b4(Ta5d6ff'yourElement'Tb4b4b4)Tb4b4b4.Te6edf3innerHTML Tff7b72= Te6edf3htmlOutputTb4b4b4;

T8b949e// Or create a DocumentFragment from Micron

Tff7b72const Te6edf3domFragment Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToFragmentTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

T8b949e// and append it to the DOM

Tffa657documentTb4b4b4.Te6edf3bodyTb4b4b4.Te6edf3appendChildTb4b4b4(Te6edf3domFragmentTb4b4b4)Tb4b4b4;

Micron-parser-js supports embedded partials The syntax is BT383838 {urlT383838refreshfields} BT383838 where refreshT383838 is the seconds between reloads (must be >= 1T383838) and fieldsT383838 is a |T383838-separated list. A pid=<id>field gives the partial a stable identity for tracking across refreshes.

The parser emits a placeholder T383838<div class="Mu-partial">⧖</div> with all the parsed metadata as T383838data-* attributes. Wire it up with T383838MicronParser.bindPartials(root, fetcher, options?) in your application logic:

T282828

Tff7b72const Te6edf3root Tff7b72= Tffa657documentTb4b4b4.Te6edf3getElementByIdTb4b4b4(Ta5d6ff'output'Tb4b4b4)Tb4b4b4;

Te6edf3rootTb4b4b4.Te6edf3innerHTML Tff7b72= Te6edf3parserTb4b4b4.Te6edf3convertMicronToHtmlTb4b4b4(Te6edf3micronMarkupTb4b4b4)Tb4b4b4;

Tff7b72const Te6edf3cleanup Tff7b72= Te6edf3MicronParserTb4b4b4.Te6edf3bindPartialsTb4b4b4(Te6edf3rootTb4b4b4, Tff7b72async Tb4b4b4(Tb4b4b4{ Te6edf3destinationTb4b4b4, Te6edf3fieldsTb4b4b4, Te6edf3idTb4b4b4, Te6edf3signal Tb4b4b4}Tb4b4b4) Tb4b4b4=> Tb4b4b4{

Tff7b72const Te6edf3res Tff7b72= Tff7b72await Te6edf3fetchTb4b4b4(Ta5d6ff`Ta5d6ff/proxy?path=Tffd700${Tffa657encodeURIComponentTb4b4b4(Te6edf3destinationTb4b4b4)Tffd700}Ta5d6ff`Tb4b4b4, Tb4b4b4{ Te6edf3signal Tb4b4b4}Tb4b4b4)Tb4b4b4;

Tff7b72return Tff7b72await Te6edf3resTb4b4b4.Te6edf3textTb4b4b4(Tb4b4b4)Tb4b4b4; T8b949e// returned as innerHTML; may also return a Node or { markup: string }

Tb4b4b4}Tb4b4b4)Tb4b4b4;

T8b949e// when the view is torn down:

Te6edf3cleanupTb4b4b4(Tb4b4b4)Tb4b4b4;

For optimal display of Micron content in the browser it's recommended to use a monospaced font with NerdFont icon support, such as the ones provided here.